﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>00m: Events Test</title>
	<style type="text/css">
		body, html {
			width: 100%;
			height: 100%;
			margin: 0;
			/*background-color: lightgreen;*/
			overflow: hidden;
		}
	</style>
	<script src="../bootloader.js" type="text/javascript"></script>
	<script type="text/javascript">
		opus.Class("Overy", {
			isa: opus.Container,
			defaultStyles: {
				overflow: "visible"
			},
			width: 100,
			chrome: [
				{w:"100%", h:"100%", content:"Click Me", styles:{border:1}},
				{name: "popup", l:100,w:100,h:100, content:"Some popup thing", showing:false, styles:{bgColor: "#FFFF80"}}
			],
			mouseoverHandler: function() {
				this.$.popup.show();
			},
			mouseoutHandler: function() {
				this.$.popup.hide();
			},
			clickHandler: function() {
				alert("hello from Overy.clickHandler (prototype)");
				this.inherited(arguments);
			}
		});
		//
		go = function() {
			view = new opus.View({
				minWidth: 376,
				minHeight: 164,
				styles: {border: 8, padding: 4, borderColor: "green"},
				controls: [
					{type: "Overy", l:10, t:10, h:100,onclick:"click"},
					{type: "Overy", l:10, t:140, h:100}
				],
				click: function() {
					alert("Hello from view.click (instance)");
				}
			});
			// Render everything
			view.render();
		}
	</script>
</head>
<body onload="go()" onresize="view.resize()">
</body>
</html>
